<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>后台登录页面</title>
    <!-- zui -->
    <link href="dist/css/zui.min.css" rel="stylesheet">
    <style>
        .head {
            position: relative;
            width: 100%;
            z-index: 999;
        }
        
        .left {
            position: absolute;
            top: 45px;
        }
        
        .right {
            position: absolute;
            top: 45px;
            left: 203px;
            right: 3px;
            bottom: 3px;
        }
        
        iframe {
            width: 100%;
            height: 100%;
            border: 0;
        }
    </style>
</head>

<body>
    <!-- 创建3个div -->
    <div class="head">
        <nav class="navbar navbar-default" role="navigation">
            <div class="container-fluid">
                <!-- 导航头部 -->
                <div class="navbar-header">
                    <!-- 移动设备上的导航切换按钮 -->
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse-example">
                  <span class="sr-only">切换导航</span>
                  <span class="icon-bar"></span>
                  <span class="icon-bar"></span>
                  <span class="icon-bar"></span>
                </button>
                    <!-- 品牌名称或logo -->
                    <a class="navbar-brand" href="javascript:void(0);">文件管理系统<small>V1.0</small></a>
                </div>
                <!-- 导航项目 -->
                <div class="collapse navbar-collapse navbar-collapse-example">
                    <!-- 一般导航项目 -->
                    <ul class="nav navbar-nav navbar-right">
                        <li>
                            <label style="margin-top: 10%;" id="LoginName">欢迎你:蜡笔小新</label>
                            <label style="display: none;" id="loginAdminId">1</label>
                        </li>
                        <li></li>
                        <!-- 导航中的下拉菜单 -->
                        <li class="dropdown">
                            <a href="javascript:void(0);" class="dropdown-toggle" data-toggle="dropdown">个人中心<b class="caret"></b></a>
                            <ul class="dropdown-menu" role="menu">
                                <li>
                                    <a href="javascript:void(0);" id="logOut">注销</a>
                                </li>
                            </ul>
                        </li>
                    </ul>
                </div>
                <!-- END .navbar-collapse -->
            </div>
        </nav>
    </div>
    <div class="left">
        <nav class="menu" data-ride="menu" style="width: 200px">
            <!--  data-animate="true" -->
            <ul id="treeMenu" class="tree tree-menu" data-ride="tree" data-animate="true">
                <li><a href="#"><i class="icon icon-list-ul"></i>全部</a></li>
            </ul>
        </nav>

    </div>
    <div class="right">
        <iframe src="page?p=defult" name="center-jframe"></iframe>
    </div>

</body>

<!-- jQuery (ZUI中的Javascript组件依赖于jQuery) -->
<script src="dist/lib/jquery/jquery-3.4.1.min.js"></script>
<!-- ZUI Javascript组件 -->
<script src="dist/js/zui.min.js"></script>
<!-- layer弹窗JS -->
<script src="layer/layer.js"></script>
<!-- 引入自己的JS -->
<script src="js/index.js"></script>
<script>
    var myTreeData = [{
        html: '<li><a href="#"><i class="icon icon-th"></i>首页</a></li>', //第一个节点
        url: 'http://openzui.com', //点击第一个节点跳转的页面
        open: true, //是否展开
        children: [{
            html: '<li><a href="#">橘子</a></li>'
        }, {
            html: '<a href="#">瓜</a>',
            children: [{
                html: '<a href="#">西瓜</a>'
            }, {
                html: '<a href="#">黄瓜</a>'
            }]
        }]
    }, {
        html: '<li><a href="#"><i class="icon icon-th"></i>第二个首页</a></li>', //第一个节点
        url: 'http://openzui.com', //点击第一个节点跳转的页面
    }];
</script>

</html>